/** * 考场管理 */
<template>
    <div class="ExaminationRoom">
        <div class="TeachingPlanTop">
            <div class="planName">
                <p class="planNameText">考场名称：</p>
                <el-input v-model="examinationRoom" placeholder="请输入考场名称"></el-input>
            </div>
            <div class="school">
                <p>考场地点：</p>
                <el-input v-model="venue" placeholder="请输入考场地点"></el-input>
            </div>
            <div class="major">
                <p>容纳人数：</p>
                <el-input v-model="capacity" placeholder="请输入容纳人数"></el-input>
            </div>
            <div class="major">
                <p>状态：</p>
                <el-select v-model="statusValue" placeholder="请选择状态">
                    <el-option label="启用" value="0"> </el-option>
                    <el-option label="停用" value="1"> </el-option>
                </el-select>
            </div>
            <div class="moreBtn">
                <el-button type="primary" @click="searchBtn" class="searchBtn" icon="el-icon-search">搜索</el-button>
                <el-button type="primary" @click="refreshBtn" class="refreshBtn" icon="el-icon-refresh">重置</el-button>
            </div>
        </div>
        <div class="bottom">
            <div class="bottomTop">
                <el-button type="primary" class="newAdd" @click="addCollege">
                    <i class="el-icon-plus"></i>
                    新增
                </el-button>

                <div class="up">
                    <el-upload class="upload-demo" name="file" action="action" :show-file-list="false" :http-request="fileChange">
                        <el-button type="primary">
                            <span class="icon iconfont icon-daoru"></span>
                            导入
                        </el-button>
                    </el-upload>
                </div>

                <el-button type="primary" class="moreDelete" @click="moreDelete">
                    <i class="el-icon-close"></i>
                    批量删除
                </el-button>
                <el-button type="primary" class="moreRelease" @click="batchRelease">
                    <i class="el-icon-s-promotion"></i>
                    下载模板
                </el-button>
            </div>
            <div class="table">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :header-cell-style="{textAlign: 'center', background: '#f3f8fc'}"
                    :cell-style="{textAlign: 'center'}"
                    @selection-change="selectionChange"
                >
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column label="监考老师" prop="invigilator"> </el-table-column>
                    <el-table-column label="考场名称" prop="roomName"> </el-table-column>
                    <el-table-column label="考场地点" prop="roomPlace"> </el-table-column>
                    <el-table-column prop="number" label="容纳人数"> </el-table-column>
                    <el-table-column prop="state" label="状态">
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.state"
                                active-color="#13ce66"
                                inactive-color="#C2C2C2"
                                active-value="0"
                                inactive-value="1"
                                @change="changeSwitch(scope.row)"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" width="200">
                        <template slot-scope="scope">
                            <div class="haed">
                                <span class="icon edit" @click="handleEdit(scope.row)">编辑</span>
                                <span class="icon del" @click="handleDelete(scope.row)">删除</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="block" v-show="tableData.length">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="10"
                    prev-text="上一页"
                    next-text="下一页"
                    layout="prev, pager, next, jumper"
                    ref="pagination"
                    :total="total"
                >
                </el-pagination>
                <el-button class="sure" type="primary">确定</el-button>
            </div>
            <!-- <div class="selectDialog"> -->

            <el-dialog :title="isEdit ? '修改考场' : '添加考场'" :visible.sync="selectClassFlag" width="700px" height="500px">
                <div class="dialogBody">
                    <div class="planName">
                        <p class="planNameText">考场名称：</p>
                        <el-input v-model="infoExaminationRoom" placeholder="请输入考场名称"></el-input>
                    </div>
                    <div class="school">
                        <p>考场地点：</p>
                        <el-input v-model="infoVenue" placeholder="请输入考场地点"></el-input>
                        <!-- <el-select v-model="infoVenue" placeholder="请选择考场地点">
                        <el-option
                            v-for="item in infoVenueOptions"
                            :key="item.majorId"
                            :label="item.majorName"
                            :value="item.majorId"
                        >
                        </el-option>
                    </el-select> -->
                    </div>
                    <div class="major">
                        <p>容纳人数：</p>
                        <el-input v-model="infoCapacity" placeholder="请输入容纳人数"></el-input>
                    </div>
                    <div class="major">
                        <p>监考教师：</p>
                        <el-select v-model="infoTeacher" @change="changeTeacher" multiple placeholder="请选择状态">
                            <el-option
                                v-for="item in teacherOptions"
                                :key="item.id"
                                :label="item.teacherName"
                                :value="{value:item.id,label:item.teacherName}"
                            >
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button class="cancel" @click="selectClassCancel">取 消</el-button>
                    <el-button class="determine" type="primary" @click="selectClassBtn">确 定</el-button>
                </div>
            </el-dialog>
            <!-- </div> -->
        </div>
    </div>
</template>

<script>
import {
    getExaminationRoomDataApi,
    addExaminationRoomItemApi,
    removeExaminationRoomItemApi,
    EditExaminationRoomItemApi,
    ExportExaminationRoomApi,
    ImportExaminationRoomApi,
    getTeacherDataListApi
} from '@/api/testManagement/examinationRoom';
export default {
    name: 'ExaminationRoom',
    data() {
        return {
            examinationRoom: '', // 考场名称
            venue: '', // 考场地点
            capacity: '', // 容纳人数
            statusValue: '', //状态
            statusOptions: [], //  状态数据
            tableData: [], // 表格数据
            total: 0, // 总条数
            selectClassFlag: false, // 弹框开关
            isEdit: false, // 弹框标题
            currentPage: 1, //当前页码
            infoExaminationRoom: '', //  弹框考场名称
            infoVenue: '', //  弹框考场地点
            infoCapacity: '', //  弹框容纳人数
            infoVenueOptions: [], // 弹框考场地点
            ids: '', // 拼接删除id
            editId: '', // 修改id
            filename: '考场安排',
            headers: {Authorization: this.$store.getters.token},
            infoTeacher:[],  // 监考老师
            teacherOptions:[],  // 监考老师数据
            invigilator_id:'',
            invigilatorName:'',
            editRow:{},
            teacherStr:''
        };
    },
    mounted() {
        document.getElementsByClassName('el-pagination__jump')[0].childNodes[0].nodeValue = '跳到第';
        this.getExaminationRoomData();
        getTeacherDataListApi().then(res=>{
            this.teacherOptions = res.rows
        })
    },
    methods: {
        // 获取列表
        async getExaminationRoomData(obj) {
            const data = await getExaminationRoomDataApi({...obj, pageSize: '10', pageNum: this.currentPage});
            if(data.code === 200) {
                this.tableData = data.rows;
                this.total = data.total
            }
        },
        // 搜索
        searchBtn() {
            let obj = {
                roomName: this.examinationRoom,
                roomPlace: this.venue,
                number: this.capacity,
                state:this.statusValue
            };
            // let obj = {
            //     subjectId: this.subjectId,
            //     gradeId: this.gradeId,
            //     id: this.studentName,
            // };
            let obj1 = {};
            for (let key in obj) {
                if (
                (obj[key] === 0 || obj[key]) &&
                obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
                ) {
                // 保存属性
                obj1[key] = obj[key];
                }
            }
            console.log(obj1);
            this.getExaminationRoomData(obj1);
        },

        // 重置
        refreshBtn() {
            this.examinationRoom = '';
            this.venue = '';
            this.capacity = '';
            this.statusValue = ''
            this.getExaminationRoomData();
        },

        // 新增
        addCollege() {
            this.isEdit = false;
            this.selectClassFlag = true;
            this.infoExaminationRoom = '';
            this.infoVenue = '';
            this.infoCapacity = '';
            this.invigilatorName = []
            this.infoTeacher = ""
        },

        // 导入
        exportTeachingPlan() {
            ImportExaminationRoomApi().then((res) => {
                console.log(res);
            });
        },
        fileChange(files) {
            let formData = new FormData();
            formData.append('file', files.file);
            ImportExaminationRoomApi(formData).then((res) => {
                console.log(res);
                if(res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '上传成功',
                    });
                }else {
                    this.$message({
                        type: 'error',
                        message: '上传失败',
                    });
                }
            });
        },
        changeTeacher(val) {
            console.log(val);
            let  invigilatorJoin_id = []
            let  invigilatorName = []
            val.forEach(item=>{
                // this.invigilator += item.label
                if(item.label && item.value) {
                  invigilatorJoin_id.push(item.value)
                  invigilatorName.push(item.label)
                }else {
                  invigilatorName.push(item)
                }
            })
            this.invigilator_id = invigilatorJoin_id.join(',')
            this.invigilatorName = invigilatorName.join(',')
            console.log(this.invigilatorName);

        },
        // handleRemove() {},
        // 获取id拼接
        selectionChange(val) {
            var arrTostring = [];
            val.forEach((item) => {
                if (arrTostring.indexOf(item.id) === -1) {
                    arrTostring.push(item.id);
                }
            });
            this.checkedList = val;
            this.ids = arrTostring.toString();
        },

        // 批量删除
        moreDelete() {
            this.$confirm('确认删除记录吗?', '提示', {
                type: 'warning',
            }).then(() => {
                removeExaminationRoomItemApi({id: this.ids}).then((res) => {
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                        });
                        this.getExaminationRoomData();
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败',
                        });
                    }
                });
            });
        },

        // 下载模板
        batchRelease() {
            this.$confirm('是否导出全部数据？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    ExportExaminationRoomApi().then((res) => {
                        console.log(res);
                        if (!res) return;
                        const blob = new Blob([res], {
                            type: 'application/vnd.ms-excel',
                        }); // 构造一个blob对象来处理数据，并设置文件类型
                        if (window.navigator.msSaveOrOpenBlob) {
                            //兼容IE10
                            navigator.msSaveBlob(blob, this.filename);
                        } else {
                            const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
                            const a = document.createElement('a'); //创建a标签
                            a.style.display = 'none';
                            a.href = href; // 指定下载链接
                            a.download = this.filename; //指定下载文件名
                            console.log(this.filename);
                            a.click(); //触发下载
                            URL.revokeObjectURL(a.href); //释放URL对象
                        }
                    });
                })
                .catch(() => {});
        },

        // 修改状态
        changeSwitch(row) {
            console.log(row);
            EditExaminationRoomItemApi({state: row.state, id: row.id}).then((res) => {
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '修改成功',
                    });
                    this.getExaminationRoomData();
                } else {
                    this.$message({
                        type: 'error',
                        message: '修改失败',
                    });
                }
            });
        },

        // 编辑
        handleEdit(row) {
            console.log(row);
            this.editRow = row
            this.isEdit = true;
            this.selectClassFlag = true;
            this.editId = row.id;
            this.infoExaminationRoom = row.roomName;
            this.infoVenue = row.roomPlace;
            this.infoCapacity = row.number;
            this.teacherStr = row.invigilator
            this.infoTeacher = row.invigilator ? row.invigilator.split(',') : ''
            console.log(this.infoTeacher)
            // this.infoTeacher = row.invigilator ? row.invigilator.split(',') : ''
            this.infoTeacher = row.invigilator ? row.invigilator.split(',') : ''
        },

        // 删除
        handleDelete(row) {
            console.log(row);
            this.$confirm('确认删除记录吗?', '提示', {
                type: 'warning',
            }).then(() => {
                removeExaminationRoomItemApi({id: row.id}).then((res) => {
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                        });
                        this.getExaminationRoomData();
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败',
                        });
                    }
                });
            });
        },

        // 分页
        handleSizeChange() {},
        handleCurrentChange() {
            this.getExaminationRoomData()
        },

        // 弹框取消事件
        selectClassCancel() {
            this.selectClassFlag = false;
        },

        // 弹框确定事件
        selectClassBtn() {

            if (this.isEdit) {
                console.log(this.infoTeacher);
                console.log(this.invigilatorName);
                // this.infoTeacher = this.infoTeacher.length == 1 ? this.infoTeacher[0] : this.infoTeacher.split(",") 
                // console.log(this.infoTeacher);
                let obj = {
                    roomName: this.infoExaminationRoom,
                    roomPlace: this.infoVenue,
                    number: this.infoCapacity,
                    id: this.editId,
                    invigilatorId:this.invigilator_id,
                    invigilator:this.invigilatorName
                };
                console.log(obj);
                if (obj.roomName && obj.roomPlace && obj.number) {
                    EditExaminationRoomItemApi(obj).then((res) => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '修改成功',
                            });
                            this.getExaminationRoomData();
                        } else {
                            this.$message({
                                type: 'error',
                                message: '修改失败',
                            });
                        }
                        this.selectClassFlag = false;
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '请填写完整信息',
                    });
                }
            } else {
                let obj = {
                    roomName: this.infoExaminationRoom,
                    roomPlace: this.infoVenue,
                    number: this.infoCapacity,
                    invigilatorId:this.invigilator_id,
                    invigilator:this.invigilatorName
                };
                addExaminationRoomItemApi(obj).then((res) => {
                    console.log(res);
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '添加成功',
                        });
                        this.getExaminationRoomData();
                    } else {
                        this.$message({
                            type: 'error',
                            message: '添加失败',
                        });
                    }
                    this.selectClassFlag = false;
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.ExaminationRoom {
    min-width: 100vh;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px 20px;
    background-color: rgb(242, 241, 246);
    display: flex;
    flex-direction: column;

    .TeachingPlanTop {
        min-width: 100vh;
        width: 100%;
        // height: 100px;
        display: flex;
        font-size: 14px;
        // justify-content: space-between;
        align-items: center;
        background: #fff;
        flex-wrap: wrap;
        border-radius: 10px;
        padding: 0 20px;
        box-shadow: 0px 4px 3px #ccc;

        .planName,
        .school,
        .major {
            display: flex;
            flex-wrap: nowrap;
            text-align: center;
            align-items: center;
            width: 270px;
            margin: 20px 0;
            p {
                text-align: right;
                width: 112px;
            }
            .el-input {
                width: 170px;
            }
        }
        .moreBtn {
            width: 200px;
            margin: 10px 10px;
            display: flex;
            .searchBtn {
                color: white;
                border: none;
                background-color: rgb(123, 180, 208);
            }
            .refreshBtn {
                color: white;
                border: none;
                background-color: rgb(108, 207, 204);
            }
        }
    }
    
    .bottom {
        width: 100%;
        flex: 1;
        background-color: #fff;
        margin-top: 10px;
        border-radius: 10px;
        .bottomTop {
            width: 100%;
            height: 50px;
            margin-top: 10px;
            align-items: center;
            line-height: 50px;
            text-align: right;
            padding: 0 20px;
            justify-content: right;
            display: flex;
            .upload-demo button{
                background-color: #66c8e3;
                margin: 0 10px;
            }
            .icon.iconfont{
                font-size: 15px;
            }
            button {
                border: none;
            }
            .newAdd {
                background-color: rgb(86, 164, 212);
            }
            .moreDelete {
                background-color: rgb(241, 129, 143);
            }
            .moreRelease {
                text-align: center;
                background-color: rgb(127, 162, 216);
                .shareImg {
                    width: 15px;
                    height: 15px;
                    margin-top: -3px;
                    background: #fff;
                }
                ::v-deep .el-icon-s-promotion {
                    color: white;
                }
            }
            .importBtn {
                background-color: #66c8e3;
            }
            .exportBtn {
                background-color: #fabd90;
                .icon {
                    // font-size: 18px;
                    margin-right: 7px;
                    .iconfont {
                        font-size: 0;
                    }
                }
            }
            .haed {
                // color: #1990FF;
                // cursor: pointer;
                span{
                  color: #1990FF;
                    cursor: pointer;
                }
                .del {
                    margin-left: 10px;
                    font-weight: bold;
                    color: #1990FF;
                    cursor: pointer;
                }
                .edit{
                    font-weight: bold;
                    margin-right: 10px;
                    color: #1990FF;
                    cursor: pointer;
                }
                .icon {
                  color: #1990FF;
                  font-weight: bold;
                }
            }
        }
        .haed {
                // color: #1990FF;
                // cursor: pointer;
                // span{
                //   color: #1990FF;
                //     cursor: pointer;
                // }
                .del {
                    margin-left: 10px;
                    // font-weight: bold;
                    color: #1990FF;
                    cursor: pointer;
                }
                .edit{
                    // font-weight: bold;
                    margin-right: 10px;
                    color: #1990FF;
                    cursor: pointer;
                }
                // .icon {
                //   color: #1990FF;
                //   font-weight: bold;
                // }
            }

        // .editDialog {
        ::v-deep .el-dialog {
            width: 500px;
            height: 500px;
            border-radius: 10px;
            font-weight: 600;
            .el-dialog__header {
                border-radius: 10px 10px 0 0;
                text-align: center;
                background-color: rgb(72, 149, 219);
                .el-dialog__title {
                    color: #fff;
                }
                .el-dialog__headerbtn .el-dialog__close {
                    color: #fff;
                }
            }

            .el-dialog__body {
                height: 300px;
                .dialogBody {
                    width: 100%;
                    height: 100%;
                    .planName,
                    .school,
                    .major {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-bottom: 10px;
                        .planNameText {
                            width: 70px;
                        }
                        .el-input {
                            width: 300px;
                        }
                        .el-select {
                            width: 300px;
                        }
                    }
                }
            }
            .dialog-footer {
                text-align: center;
                button {
                    width: 100px;
                    height: 35px;
                    border-radius: 16px;
                    line-height: 0;
                }
                .cancel {
                    border: none;
                    color: #848383;
                    background-color: #f0f0f0;
                }
                .determine {
                    border: none;
                    background-color: #4995dc;
                }
            }
        }
        // }
        .block {
            padding: 0 20px 0 0;
            height: 65px;
            display: flex;
            align-items: center;
            justify-content: right;
            background-color: #fff;

            ::v-deep .btn-prev {
                border: solid 1px #e6e6e6;
                border-radius: 5px;
                color: #6f6f6f;
            }

            ::v-deep .btn-next {
                border: solid 1px #e6e6e6;
                border-radius: 5px;
                color: #6f6f6f;
            }
            ::v-deep .el-pager li {
                background: #fff;
                font-size: 13px;
                min-width: 30.5px;
                height: 28px;
                line-height: 28px;
                box-sizing: border-box;
            }

            ::v-deep .el-pager li.active {
                background-color: #4895db;
                color: #fff;
                cursor: default;
            }
            ::v-deep .number {
                border: solid 1px #e6e6e6;
                margin: 0 5px;
                border-radius: 5px;
                color: #6f6f6f;
            }
            ::v-deep .el-button {
                // width: 50px;
                height: 28px;
                line-height: 0;
            }
            .sure {
                width: 50px;
                height: 30px;
                line-height: 0;
                text-align: center;
                padding: 0;
            }
        }
    }
}
</style>
